<template>
  <Container class="calendar-list">
    <Tabs>
      <Button 
        size="large" 
        class="item" 
        type="primary" 
        slot="extra"
        icon="ios-create"
        @click="onEditDes">当月活动说明</Button>
      <Button 
        size="large" 
        class="item" 
        type="primary" 
        slot="extra"
        icon="md-add"
        @click="onAdd">新增活动</Button>
      <Button 
        size="large" 
        class="item" 
        type="primary" 
        slot="extra"
        @click="changeType"
        :icon="showCal ? 'md-calendar' : 'md-list-box'">{{showCal ? '日历' : '列表'}}模式</Button>
      <TabPane label="活动日历" name="tab1" class="scroll">
        <Calendar class="calendar" v-model="date" v-if="showCal" @on-change="getData">
          <template slot-scope="{ date, data }" slot="month">
              <block
                v-for="item in list.data"
                :key="item.id">
                <Badge
                  :status="item.status" 
                  :text="item.title" 
                  class="badge"
                  v-if="compareData(data.day, item.startDate, item.endDate)" />
              </block>
          </template>
        </Calendar>
        <block v-else>
          <Table 
            :height="options.tableHeight" 
            stripe
            :columns="list.columns" 
            :data="list.data" 
            no-data-text="亲，没有找到相关记录哦！~"></Table>
        </block>
        <Loader :status="list.status" @refresh="getData"></Loader>
      </TabPane>
    </Tabs>
    <ExplainEditItem ref="explain" @complete="getData"></ExplainEditItem>
    <CalendarEditItem ref="edit" @complete="getData"></CalendarEditItem>
  </Container>
</template>
<script>
import table from '@/table'
import CalendarListData from './list/CalendarListData'
import ExplainEditItem from './list/ExplainEditItem'
import CalendarEditItem from './list/CalendarEditItem'
import { clearEmpty, formatDate } from '@/util'
export default {
	components: {
		ExplainEditItem,
    CalendarEditItem
	},
  data() {
    return {
      list: CalendarListData,
      date: new Date(),
      showCal: true,
      options: {
        tableHeight: 300
      }
    }
  },
  mounted() {
    this.$bus.$on('onEdit', this.onEdit)
    this.$bus.$on('onDelete', this.onDelete)
		this.getData()
  },
  destroyed() {
    this.$bus.$off()
  },
  methods: {
    ...table,
    getData() {
			let param = {
        year: this.year,
        month: this.month
      }
      this.list.status = 'loading'
      this.$ajaxGet('/activity/calendar/info', param).then(data => {
        this.list.data = (data.itemList || []).map((item, index) => {
          let i = index % 3
          return {
            ...item,
            status: i === 1 ? 'success' : (i === 0 ? 'warning' : 'error')
          }
        })
        this.$refs.explain.form.remark = data.remark
        this.list.status = 'pass'
      }).catch(() => {
        this.list.status = 'error'
      })
		},
    compareData(day, start, end) {
      start = start.substring(0, 10)
      end = end.substring(0, 10)
      let c = new Date(day.replace(/\-/g, "\/")).getTime()
      let s = new Date(start.replace(/\-/g, "\/")).getTime()
      let e = new Date(end.replace(/\-/g, "\/")).getTime()
      return c - s >= 0 && c - e <= 0
    },
    changeType() {
      this.showCal = !this.showCal
      this.initTable()
    },
    onAdd() {
      this.$refs.edit.openModal()
		},
		onEdit(id) {
			this.$refs.edit.getInfo(id)
		},
    onEditDes() {
      let y = this.date.getFullYear()
      let m = this.date.getMonth() + 1
      this.$refs.explain.getInfo(y, m)
    },
    onDelete(id, name) {
			this.$Modal.confirm({
        title: '删除',
        content: '确定删除当前活动标签？',
        onOk: () => {
          this.$ajaxGet(`/activity/calendar/item/delete`, {id: id}).then(data => {
            this.$Notice.success({
              title: '删除成功',
              desc: `<span class="font-red">${name}</span> 已被删除。`
            })
            this.getData()
          })
        }
      })
		}
	},
  computed: {
    year() {
      return this.date.getFullYear()
    },
    month() {
      return this.date.getMonth() + 1
    }
  },
	watch: {
		$route() {
			this.getData()
		}
	}
}
</script>